<template>
    <div class="flex-row justify-center flex-wrap">
        <div class="title">基础元素</div>
        <!-- tid 与 defaultElementTypeProvider 中对应 -->
        <!-- 包含 class="ep-draggable-item" -->
        <div class="ep-draggable-item item" tid="defaultModule.text">
            <i class="iconfont sv-text" />
            <span>文本</span>
        </div>
        <div class="ep-draggable-item item" tid="defaultModule.image">
            <i class="iconfont sv-image" />
            <span>图片</span>
        </div>
        <div class="ep-draggable-item item" tid="defaultModule.table">
            <i class="iconfont sv-table" />
            <span>表格</span>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'PrinterPlugin'
}
</script>
<script lang="ts" setup>
import { onMounted } from "vue";
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
// 初始化 provider
hiprint.init({
    providers: [defaultElementTypeProvider()],
});
/**
 * 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */
onMounted(() => {
    buildLeftElement();
});
/**
 * 构建左侧可拖拽元素
 * 注意: 可拖拽元素必须在 hiprint.init() 之后调用
 * 而且 必须包含 class="ep-draggable-item" 否则无法拖拽进设计器
 */
const buildLeftElement = () => {
    // eslint-disable-next-line no-undef
    hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
};
</script>
<style lang="scss" scoped></style>